<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>答者管理</el-breadcrumb-item>
            <el-breadcrumb-item>答者列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片视图区域-->
        <el-card class="box-card">
            <!--搜索与添加区域-->
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList()">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible = true">添加答者</el-button>
                </el-col>
              <el-col :span="4">
                <el-button type="success" @click="importDialogVisible = true">批量导入答者</el-button>
<!--                此处存疑-->
              </el-col>
            </el-row>

            <!--答者列表区域-->
            <el-table :data="showUserList" highlight-current-row
                        :row-class-name="tableRowClassName" @row-click = "onRowClick" border stripe>
                <el-table-column label="#" type="index">
                </el-table-column>
                <el-table-column label="姓名" prop="username">
                </el-table-column>
              <el-table-column label="账号" prop="id">
              </el-table-column>
              <el-table-column label="密码" prop="password">
              </el-table-column>
              <el-table-column label="电话" prop="phone">
              </el-table-column>
<!--              <el-table-column label="状态" prop="used" >-->
<!--                <template slot-scope="scope">&lt;!&ndash;绑定list里的这一行!&ndash;&gt;-->
<!--                  &lt;!&ndash;点击按钮可修改状态&ndash;&gt;-->
<!--                  <el-button :type="scope.row.used === 1 ? 'primary' : 'success'"  size="mini" @click="editUsed(scope.row)">{{scope.row.used}}</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="版本" prop="version">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-input-number v-model=scope.row.version @change="editVersion(scope.row)" :min="1" :max="10" size="small"></el-input-number>-->
<!--                </template>-->
<!--              </el-table-column>-->
                 <el-table-column label="操作">
                     <template slot-scope="scope">
                         <!--修改按钮-->
                         <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
                         <!--删除按钮-->
                         <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
                     </template>
                </el-table-column>
            </el-table>

            <!--分页区域-->
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>

        <!--添加用户的对话框-->
        <el-dialog
            title="添加答者"
            :visible.sync="addDialogVisible"
            width="30%"
            @close="addDialogClosed">
            <!--内容主体区域-->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef"  label-width="70px">
                <el-form-item label="姓名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
              <el-form-item label="账号" prop="id">
                <el-input v-model="addForm.id"></el-input>
              </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>

        <!--修改答者的对话框-->
        <el-dialog
            title="修改答者信息"
            :visible.sync="editDialogVisible"
            width="30%"
            @close="editDialogClosed">
            <!--修改答者内容区域-->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="姓名">
                    <el-input v-model="editForm.username"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="id">
                    <el-input v-model="editForm.id"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input v-model="editForm.phone"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUser">确 定</el-button>
            </span>
        </el-dialog>

      <!--批量导入对话框!-->
      <el-dialog title="批量导入答者"  :visible.sync="importDialogVisible"
                 width="30%">
<!--                 width="30%" ref="importRef"-->
<!--                 @close="importDialogClosed">-->
        <el-upload
          ref="upload"
          action="/"
          :on-change="importExcel"
          accept=".xlsx, .xls"
          :show-file-list="false"
          :auto-upload="false">
          <el-button size="small" type="primary">上传答者</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls、xlsx文件，且不超过500kb</div>
        </el-upload>
      </el-dialog>
    </div>
</template>

<script>
import * as XLSX from 'xlsx/xlsx.mjs'
/* load 'fs' for readFile and writeFile support */
import * as fs from 'fs'
XLSX.set_fs(fs)
export default {
    data () {
        // 验证手机号的规则
        var checkMobile = (rule, value, callback) => {
            // 验证邮箱的正则表达式
            const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

            if (regMobile.test(value)) {
                // 合法的邮箱
                return callback()
            }
            callback(new Error('请输入合法的手机号'))
        }

        return {
           currentRowIndex: 1,
           // 当前选中行
            userInfo: {},
            // 是否显示分配角色对话框
            editForm: {
              username: '',
              id: '',
              phone: ''
            },
            editFormRules: {
                email: [
                    { require: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 10, message: '用户账号的长度在3~10个字符之间', trigger: 'blur' }
                ],
                phone: [
                    { require: true, message: '请输入电话', trigger: 'blur' },
                    { validator: checkMobile, trigger: 'blur' }
                ]
            },
            // 控制修改用户对话框的显示和隐藏
            editDialogVisible: false,
            // 控制添加用户对话框的显示和隐藏
            addDialogVisible: false,
            // 添加用户的表单数据
            importDialogVisible: false,
            // 批量导入对话框
          fileList: [{ name: 'excelupload1.xlsx', url: 'D:\\excelupload1.xlsx' }],
            addForm: {
                username: '',
                id: '',
                password: '',
                phone: ''
            },
            // 添加表单的验证规则对象
            addFormRules: {
                username: [
                    { require: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '用户名的长度在3~10个字符之间', trigger: 'blur' }
                ],
                id: [
                { require: true, message: '请输入账号', trigger: 'blur' },
                { min: 3, max: 10, message: '用户账号的长度在3~10个字符之间', trigger: 'blur' }
              ],
                password: [
                    { require: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '密码的长度在6~15个字符之间', trigger: 'blur' }
                ],
                mobile: [
                    { require: true, message: '请输入电话', trigger: 'blur' },
                    { validator: checkMobile, trigger: 'blur' }
                ]
            },
            // 获取用户列表的参数对象
            queryInfo: {
                query: '',
                // 当前的页数
                pagenum: 1,
                pagesize: 5
            },
            // 保存一个答者列表信息
            userlist: [{
              id: '20204566',
              username: '答者1',
              password: '26548575',
              phone: '18601342954',
              used: 1,
              version: 1
            }, {
              id: '895641',
              username: '答者2',
              password: '5815264',
              phone: '18601342954',
              used: 1,
              version: 1
            }, {
              id: '526334',
              username: '答者3',
              password: '5858',
              phone: '1860134564',
              used: 1,
              version: 1
            }, {
              id: '8978',
              username: '答者4',
              password: '5815264',
              phone: '18601342954',
              used: 1,
              version: 1
            }, {
              id: '865',
              username: '答者5',
              password: '581544',
              phone: '18601342954',
              used: 0,
              version: 2
            }, {
              id: '525',
              username: '答者6',
              password: '21544',
              auth: 3,
              phone: '18601342954',
              used: 0,
              version: 1
            }],
            total: 4,
            showUserList: [],

            users: [] // 批量导入答者时所有的
        }
    },
    created () { // 钩子函数 vue对象实例化时执行
        this.getUserList()
    },
    methods: {

      editUsed (row) { // 编辑答者信息
        var i
        for (i = 0; i < this.userlist.length; i++) {
          if (this.userlist[i].userid === row.userid) {
            if (row.used === 1) this.userlist[i].used = 0
            else this.userlist[i].used = 1
            break
            }
          }
        },

      editVersion (row) { // 编辑版本

      },

      tableRowClassName ({ row, rowIndex }) { // 获取当前行
        row.row_index = rowIndex
      },
      onRowClick (row, event, column) { // 获取当前行
        this.currentRowIndex = row.row_index
      },

        // 根据id进行用户信息的删除
        async removeUserById (id) {
            // 弹框进行提示，询问用户是否删除数据
            const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).catch(err => {
                    return err
                })

            // 如果用户确认删除，则返回confirm
            // 如果用户取消删除，则返回cancel
            if (confirmResult !== 'confirm') {
                return this.$message.info('已经取消删除')
            }
          let i
          for (i = 0; i < this.userlist.length; i++) {
              if (this.userlist[i].id === id) {
                for (let j = (i + 1); j < this.userlist.length; j++) {
                  this.userlist[j - 1] = this.userlist[j]
                }
              }
            }
            this.userlist.length--
            // // 发起请求进行用户删除
            // const { data, res } = await this.$http.delete('users/' + id)
            //
            // if (res.meta.status !== 200) {
            //     return this.$message.error('删除用户失败')
            // }

            this.$message.error('删除用户成功')
            this.handleCurrentChange(1)
            // console.log(confirmResult)
        },

        // 修改用户信息并提交
        editUser () {
          this.$message.success('更新用户信息成功')
          // 隐藏对话框
          this.editDialogVisible = false
          console.log('then')
          console.log(this.currentRowIndex)
          const loc = ((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize) + this.currentRowIndex
          console.log(loc)
          this.userlist[loc].username = this.editForm.username
          this.userlist[loc].id = this.editForm.id
          this.userlist[loc].phone = this.editForm.phone
          // 刷新数据列表
          this.getUserList()
//           var that = this
//           this.$refs.editFormRef.validate(async valid => {
//             if (!valid) {
//               return
//             }
//             this.$message.success('更新用户信息成功')
//           // 隐藏对话框
//           this.editDialogVisible = false
//             console.log('index')
//             console.log(this.currentRowIndex)
//             that.userlist[this.currentRowIndex].username = this.editForm.username
//           that.userlist[this.currentRowIndex].id = this.editForm.id
//           that.userlist[this.currentRowIndex].phone = this.editForm.phone
// //                 const { data, res } = await this.$http.put('users/' + this.editForm.id, {
// //                     email: this.editForm.email,
// //                     mobile: this.editForm.mobile
// // }
// //                 )
// //
// //                 if (res.meta.status !== 200) {
// //                     return this.$message.error('更新用户信息失败')
// //                 }
// //                 // 关闭对话框
// //                 this.showEditDialog = false
//                 // 刷新数据列表
//                  this.getUserList()
//                 // 提示修改成功
//             })
        },
        // 监听修改用户对话框的关闭事件
        editDialogClosed () {
            // 对表单字段内容重置
            this.$refs.editFormRef.resetFields()
        },
      importDialogClosed () {
        this.$refs.importRef.resetFields()
      },

        // 展示编辑用户的对话框
         showEditDialog (row) {
            // 发起一个http请求
            // const {data,res} = await this.$http.get('users/' + id)
            // if(res.meta.status !== 200){
            //     return this.$message.error('查询用户信息失败')
            // }

            // //给编辑表单数据进行赋值
            // this.editForm = res.data;

            this.editForm = {
                username: row.username,
                id: row.id,
                phone: row.phone
            }
          // 显示对话框
            this.editDialogVisible = true
        },

        // 点击按钮，添加新用户
        addUser () {
            this.$refs.addFormRef.validate(async valid => {
                if (!valid) {
                    return
                }
                // 发起一个添加用户的http请求
                // const {data:res} = await this.$http.post('users',this.addForm.id);
                // if(res.meta.status !== 201){
                //     this.$message.error('添加用户失败')
                // }
                this.$message.success('添加用户成功')

                // 隐藏对话框
                this.addDialogVisible = false
              // 表格增加一行
              this.userlist.push({
                username: this.addForm.username,
                id: this.addForm.id,
                password: this.addForm.password,
                phone: this.addForm.phone,
                used: 0,
                version: 1
              })
            })
                this.getUserList()
        },
        // 监听添加用户对话框的关闭事件
        addDialogClosed () {
            this.$refs.addFormRef.resetFields()
        },
        // 监听swith用户状态开关的改变
        userStateChanged (userinfo) {
            // 打印状态信息
            console.log(userinfo.mg_state)

            // 这里应该发送http请求
            var len = this.userlist.length
            for (var i = 0; i < len; i++) {
                var user = this.userlist[i]
                if (user.id === userinfo.id) {
                    user.mg_state = userinfo.mg_state
                }
            }
            this.getUserList()
        },
        // 监听pageSize改变的事件
        handleSizeChange (newSize) {
            this.queryInfo.pagesize = newSize
            this.getUserList()
        },
        // 监听页码值改变的事件
        handleCurrentChange (newPage) {
            this.queryInfo.pagenum = newPage
            this.getUserList()
        },
         getUserList () { // 获取用户列表并分页
            // 请求获取用户列表信息
            // const {data,res} = await this.$http.get('users',{params:this.queryInfo})
            // if(res.meta.status !== 200){
            //     return this.$message.error('获取用户列表失败')
            // }
            // this.userlist = res.data.userlist
            // this.total = res.data.total
            // console.log(res)

            // alert('每页显示:' + this.queryInfo.pagesize + ',当前第' + this.queryInfo.pagenum + '页');
            // 首先进行清空
            this.showUserList = []
          let len = this.userlist.length
          const searchUserList = []
            for (let i = 0; i < len; i++) {
                const user = this.userlist[i]
                if (this.queryInfo.query !== '') {
                    if (user.username.indexOf(this.queryInfo.query) !== -1) {
                        searchUserList.push(user)
                    }
                } else {
                    searchUserList.push(user)
                }
            }

            // //获取对应的记录列表
            const start = (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize
            len = searchUserList.length
            for (let i = 0; i < len; i++) {
                if (i >= start && i < start + this.queryInfo.pagesize) {
                    const user = searchUserList[i]
                    this.showUserList.push(user)
                }
            }
            this.total = searchUserList.length
        },
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePreview (file) {
        console.log(file)
      },
      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },
      // handleCurrentChange (index) { // currentPage变动时触发，index值为当前页前端实现分页
      //   console.log(this.memberList)
      //   this.currentPage = index
      //   // this.memberLists = this.memberList.slice((index - 1) * 5, index * 5)             //将初始数据进行裁剪赋值给新数组
      //   // this.$set(this._data, 'memberLists', this.memberList.slice((index - 1) * 5, index * 5))
      //   this.showData = this.memberList.slice((index - 1) * 5, index * 5)
      // },
      // 第一步上传文件
      importExcel (file) {
        const self = this
        const types = file.name.split('.')[1]
        const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(
          item => item === types
        )
        console.log(fileType)
        if (!fileType) {
          alert('格式错误！请重新选择')
          return
        }
        this.file2Xce(file).then(tab => {
          // console.log(tab)
          if (tab && tab.length > 0) {
            this.tab = tab
            if (this.tab.length !== 0) {
              console.log(tab)
              this.xlscList = []
              this.tab[0].sheet.forEach(item => {
                // console.log(item.indexOf("C") != -1)
                if (item.indexOf('') !== -1) {
                  const inputInfo = item.split("'")// excel的数据类型都是text所以通过item.split("'")截取，拿到所以表的数据
                  if (inputInfo.length === 2) {
                    self.xlscList.push(inputInfo[1])
                    // console.log(self.xlscList)
                  } else {
                    const inputInfo2 = item.split('=')
                    self.xlscList.push(inputInfo2[1])
                  }
                }
              })
            }
            console.log(this.xlscList)
            console.log('1111')
            if (this.xlscList.length !== 0) {
              this.setInputToForm()
            }
          }
        })
      },
      // 对组进行切割
      setInputToForm () {
        const headerLength = 4
        if (this.xlscList.length >= headerLength) { // 判断表头的长度
          /*
          * 将一个数组分成几个同等长度的数组
          * array[分割的原数组]
          * size[每个子数组的长度]
          */
          this.xlscList = this.xlscList.slice(headerLength)
          // console.log()
          const result = []
          const personnelList = []
          for (let x = 0; x < Math.ceil(this.xlscList.length / headerLength); x++) {
            const start = x * headerLength
            const end = start + headerLength
            result.push(this.xlscList.slice(start, end))
          }
          console.log(result)
          console.log('tttt')
          // 获取每一个数组的第一个，第二个，第三个...通过push重新拼装成一个新的数组对象
          for (let i = 0; i < result.length; i++) {
            for (let j = 0; j < result[i].length; j++) {
              if (j === 0) {
                const temp = {
                  username: '',
                  id: '',
                  password: '',
                  phone: ''
                }
                temp.username = result[i][j]
                temp.id = result[i][j + 1]
                temp.password = result[i][j + 2]
                temp.phone = result[i][j + 3]
                console.log(temp)
                console.log('ppp')
                personnelList.push(temp)
                // personnelList.push(  { cyrjsmc: result[i][j], cyrxm: result[i][j + 1], sfzhm: result[i][j + 2],
                //   sjhm: result[i][j + 3], sfzcrmc: result[i][j + 4], sfglymc: result[i][j + 5],
                //   sfptmc: result[i][j + 5] })
              }
            }
          }
          // this.memberList = personnelList
          this.userlist.push.apply(this.userlist, personnelList)
          console.log('mem')
          // console.log(this.memberList)
          this.handleCurrentChange(1)
          this.importDialogVisible = false
        } else {
          this.$message({
            message: '上传格式不對',
            type: 'warning'
          })
        }
      },
      file2Xce (file) {
        return new Promise(function (resolve, reject) {
          const reader = new FileReader()
          reader.onload = function (e) {
            const data = e.target.result
            this.wb = XLSX.read(data, {
              type: 'binary'
            })
            const result = []
            this.wb.SheetNames.forEach(sheetName => {
              result.push({
                sheetName: sheetName,
                sheet: XLSX.utils.sheet_to_formulae(this.wb.Sheets[sheetName])
              })
            })
            resolve(result)
          }
          reader.readAsBinaryString(file.raw)
        })
      }
    }
}
</script>

<style lang="less" scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
</style>

<!--开始测试-->
<!--<template>-->
<!--  <div>-->
<!--    <el-upload ref="upload" action="/" :show-file-list="false" :on-change="importExcel" :auto-upload="false">-->
<!--      <el-button class="d2-mt-10 d2-mb-10" slot="trigger" icon="el-icon-upload" type="primary">-->
<!--        上传人员-->
<!--      </el-button>-->
<!--    </el-upload>-->

<!--    <el-table :data="memberList" highlight-current-row border style="width: 100%" height="600" :header-cell-style="{background:'#eef1f6',color:'#606266'}" class="table-fixed-lineBug">-->
<!--      <el-table-column prop="cyrxm" label="参会人姓名" align="center" min-width="150" show-overflow-tooltip/>-->
<!--      <el-table-column prop="cyrjsmc" label="参会人角色" align="center" min-width="150" show-overflow-tooltip/>-->
<!--      <el-table-column prop="sfzhm" label="身份证号码" align="center" min-width="200" show-overflow-tooltip/>-->
<!--      <el-table-column prop="sjh" label="手机号码" align="center" min-width="150" show-overflow-tooltip/>-->
<!--      <el-table-column prop="iszcr" label="是否主持人" align="center" width="110" show-overflow-tooltip/>-->
<!--      <el-table-column prop="isgly" label="是否会议管理员" align="center" width="130" show-overflow-tooltip/>-->
<!--      <el-table-column prop="ispt" label="是否旁听" align="center" width="130" show-overflow-tooltip/>-->
<!--    </el-table>-->
<!--    <el-pagination @current-change="handleCurrentChange(currentPage)" :current-page.sync="currentPage" :page-size="5" layout="total, prev, pager, next" :total="memberList.length" align="right">-->
<!--    </el-pagination>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import * as XLSX from 'xlsx/xlsx.mjs'-->
<!--/* load 'fs' for readFile and writeFile support */-->
<!--import * as fs from 'fs'-->
<!--XLSX.set_fs(fs)-->

<!--export default {-->
<!--  name: '',-->
<!--  components: {},-->
<!--  props: {-->
<!--  },-->
<!--  data () {-->
<!--    return {-->
<!--      memberList: [],-->
<!--      xlscList: [],-->
<!--      wb: null,-->
<!--      currentPage: 1,-->
<!--      showData: []-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    handleCurrentChange (index) { // currentPage变动时触发，index值为当前页前端实现分页-->
<!--      console.log(this.memberList)-->
<!--      this.currentPage = index-->
<!--      // this.memberLists = this.memberList.slice((index - 1) * 5, index * 5)             //将初始数据进行裁剪赋值给新数组-->
<!--      // this.$set(this._data, 'memberLists', this.memberList.slice((index - 1) * 5, index * 5))-->
<!--      this.showData = this.memberList.slice((index - 1) * 5, index * 5)-->
<!--    },-->
<!--    // 第一步上传文件-->
<!--    importExcel (file) {-->
<!--      const self = this-->
<!--      const types = file.name.split('.')[1]-->
<!--      const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(-->
<!--        item => item === types-->
<!--      )-->
<!--      console.log(fileType)-->
<!--      if (!fileType) {-->
<!--        alert('格式错误！请重新选择')-->
<!--        return-->
<!--      }-->
<!--      this.file2Xce(file).then(tab => {-->
<!--        // console.log(tab)-->
<!--        if (tab && tab.length > 0) {-->
<!--          this.tab = tab-->
<!--          if (this.tab.length !== 0) {-->
<!--            console.log(tab)-->
<!--            this.xlscList = []-->
<!--            this.tab[0].sheet.forEach(item => {-->
<!--              // console.log(item.indexOf("C") != -1)-->
<!--              if (item.indexOf('') !== -1) {-->
<!--                const inputInfo = item.split("'")// excel的数据类型都是text所以通过item.split("'")截取，拿到所以表的数据-->
<!--                if (inputInfo.length === 2) {-->
<!--                  self.xlscList.push(inputInfo[1])-->
<!--                  // console.log(self.xlscList)-->
<!--                } else {-->
<!--                  const inputInfo2 = item.split('=')-->
<!--                  self.xlscList.push(inputInfo2[1])-->
<!--                }-->
<!--              }-->
<!--            })-->
<!--          }-->
<!--          console.log(this.xlscList)-->
<!--          console.log('1111')-->
<!--          if (this.xlscList.length !== 0) {-->
<!--            this.setInputToForm()-->
<!--          }-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    // 对组进行切割-->
<!--    setInputToForm () {-->
<!--      if (this.xlscList.length >= 7) { // 判断表头的长度-->
<!--        /*-->
<!--        * 将一个数组分成几个同等长度的数组-->
<!--        * array[分割的原数组]-->
<!--        * size[每个子数组的长度]-->
<!--        */-->
<!--        this.xlscList = this.xlscList.slice(7)-->
<!--        // console.log()-->
<!--        const result = []-->
<!--        const personnelList = []-->
<!--        for (let x = 0; x < Math.ceil(this.xlscList.length / 7); x++) {-->
<!--          const start = x * 7-->
<!--          const end = start + 7-->
<!--          result.push(this.xlscList.slice(start, end))-->
<!--        }-->
<!--        console.log(result)-->
<!--        console.log('tttt')-->
<!--        // 获取每一个数组的第一个，第二个，第三个...通过push重新拼装成一个新的数组对象-->
<!--        for (let i = 0; i < result.length; i++) {-->
<!--          for (let j = 0; j < result[i].length; j++) {-->
<!--            if (j === 0) {-->
<!--              const temp = {-->
<!--                cyrjsmc: '',-->
<!--                  cyrxm: '',-->
<!--                  sfzhm: '',-->
<!--                  sjh: '',-->
<!--                  iszcr: '',-->
<!--                  isgry: '',-->
<!--                  ispt: ''-->
<!--              }-->
<!--              temp.cyrjsmc = result[i][j]-->
<!--              temp.cyrxm = result[i][j + 1]-->
<!--              temp.sfzhm = result[i][j + 2]-->
<!--              temp.sjh = result[i][j + 3]-->
<!--              temp.iszcr = result[i][j + 4]-->
<!--              temp.isgly = result[i][j + 5]-->
<!--              temp.ispt = result[i][j + 6]-->
<!--              console.log(temp)-->
<!--              console.log('ppp')-->
<!--              personnelList.push(temp)-->
<!--              // personnelList.push(  { cyrjsmc: result[i][j], cyrxm: result[i][j + 1], sfzhm: result[i][j + 2],-->
<!--              //   sjhm: result[i][j + 3], sfzcrmc: result[i][j + 4], sfglymc: result[i][j + 5],-->
<!--              //   sfptmc: result[i][j + 5] })-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--        this.memberList = personnelList-->
<!--        console.log('mem')-->
<!--        console.log(this.memberList)-->
<!--        this.handleCurrentChange(1)-->
<!--      } else {-->
<!--        this.$message({-->
<!--          message: '上传格式不對',-->
<!--          type: 'warning'-->
<!--        })-->
<!--      }-->
<!--    },-->
<!--    file2Xce (file) {-->
<!--      return new Promise(function (resolve, reject) {-->
<!--        const reader = new FileReader()-->
<!--        reader.onload = function (e) {-->
<!--          const data = e.target.result-->
<!--          this.wb = XLSX.read(data, {-->
<!--            type: 'binary'-->
<!--          })-->
<!--          const result = []-->
<!--          this.wb.SheetNames.forEach(sheetName => {-->
<!--            result.push({-->
<!--              sheetName: sheetName,-->
<!--              sheet: XLSX.utils.sheet_to_formulae(this.wb.Sheets[sheetName])-->
<!--            })-->
<!--          })-->
<!--          resolve(result)-->
<!--        }-->
<!--        reader.readAsBinaryString(file.raw)-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
